/*
 * @Author jiangzhiwei
 * @Date 2023-07-18 18:10:22
 * @LastEditors jiangzhiwei
 * @LastEditTime 2023-07-28 11:28:46
 * @FilePath \test-cron\src\components\yc-cron\components\base\common-tabs\index.js
 * @Description 标签页组件
 */
import { defineComponent } from 'vue-demi'
import { h } from '../../../utils/domutil'
import { emitValue, getComponentProp, getSlot } from '../../../utils/componentutil'
import { VALUE_NAME } from '../../../utils/constant'
import './tabs.css'

export default defineComponent({
  props: {
    /** 当前选中项的label */
    [VALUE_NAME]: {
      type: [String, Number, Boolean],
      default: undefined
    },
  },
  methods: {
    clickTab (label) {
      emitValue(this, label)
    }
  },
  render () {
    return h(
      'div',
      {
        class: 'yc-cron-tabs'
      },
      [
        h(
          'header',
          { class: 'yc-cron-tabs__header' },
          getSlot(this).map(item => {
            const label = getComponentProp(item, 'label')
            return h(
              'span',
              {
                class: { 'yc-cron-tabs__item': true, 'is-active': label === this[VALUE_NAME] },
                on: { click: () => this.clickTab(label) }
              },
              label
            )
          })
        ),
        h(
          'article',
          { class: 'yc-cron-tabs__body' },
          getSlot(this)
        )
      ]
    )
  }
})